body { font-family: "Open Sans", Arial, "Microsoft YaHei", "微软雅黑", SimSun, sans-serif; }

.container-fluid { margin: 0; padding: 0; }
.navbar { background-color: #ffffff; border-radius: 0; }
.navbar-header { float:none; color: #262424; }
.navbar-header .navbar-text { font-size: 30px; color: #262424; margin: 15px 15px 10px; }
.navbar-header>ul { font-size: 16px; float:right; height: 32px;line-height:28px; margin-top:22px; }
.navbar-header>ul>li.active>a, .navbar-header>ul>li.active>a:focus, .navbar-header>ul>li.active>a:hover { color: #55BB47; background-color: inherit; }
.navbar-header>ul>li>a:focus, .navbar-header>ul>li>a:hover { color: #55BB47; background-color: inherit; }
.navbar-header>ul>li.active { border-bottom: 8px solid #55BB47; }
.navbar-header>ul>li>a { color: #000000; padding: 6px 15px; }
.navbar-header>ul>li>hr { width: 0px; height: 20px; margin:14px 2px 0px; border: 1px solid #eee; }

.content {
    background-image: url(../images/bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 968px;
    padding-top: 40px;
    text-align: center;
}

.content>.menu { margin: 0 auto 6px; width: 840px; text-align:center; }
.content>.menu>.panel { margin: 60px 10px 0px; padding: 20px 10; float: left; width: 260px; height: 500px; background:#ffffff; opacity: 0.9;filter:Alpha(opacity=90);*zoom:1; }
.content .icon { width: 142px; height: 142px; margin: 40px auto 10px; }
.content .title  { color: #393939; font-size: 24px; margin: 20px 0 10px; font-weight: bold; }
.content ul  { padding-left: 0; list-style: none; text-align: center; }
.content ul>li>a  { display:block; padding: 4px 15px; color: #2A292C; font-size: 16px; }
.content ul>li:hover>a  { color: #55BB47; }

.content>.doc {
    background-image: url(../images/doc.png);
    margin: 6px auto;
    width: 822px;
    height: 70px;
    background-repeat: no-repeat;
    background-size:cover;
    text-align:right;
    padding: 16px;
}

.content>.doc>a {
    font-size: 26px;
    color: #55BB47;
    line-height: 30px;
    margin: 10px 20px;
}

.content>.chivoxpanel { margin: 10px auto; display: inline-block; width: 990px; min-height: 760px; background:#ffffff; border-radius: 4px; }
.content>.chivoxpanel>.list { float: left; text-align: center; width: 196px; min-height: 730px; margin: 10px 20px 10px 10px; border-right: solid 1px #999999; }
.content>.chivoxpanel>.list>p { text-align: center; font-size:18px; line-height: 24px; font-weight: bold; }
.content>.chivoxpanel>.list ul { width: 150px; margin: 2px auto; line-height: 20px; }
.content>.chivoxpanel>.list ul>li>a { font-size: 13px; color: #2A292C; }
.content>.chivoxpanel>.list ul>li.active>a { color: #55BB47; text-decoration:underline; }
.content>.chivoxpanel>.mainarea { float: left; text-align: left; width:720px; }
.content>.chivoxpanel>.mainarea>.title { font-size: 28px; color: #2A292C; line-height: 30px; font-weight: bold; margin: 38px 0 40px 0px; }
.content>.chivoxpanel>.mainarea>.currentWord { display:block; color: #333333; font-size: 18px; line-height:36px; background: #F5F5F5; border: 1px solid #E0E0E0; padding: 10px; }
.content>.chivoxpanel pre { font-size: 10px; }
.content>.chivoxpanel .message { 
    font-size: 10px; 
    display:block;
    min-height: 10px;
    border: 1px solid #FFA900;
    padding: 6px 15px;
    margin: 6px 0;
}
.aiPanel{ height: 80px; }
.scoreTitle {
    font-size: 14px;
    font-weight: bold;
    padding-left: 20px;
    color: #666;
    background-image: url(../images/score-title.png);
    background-repeat: no-repeat;
    background-position: left center;
}

.scoreResult, #scoreResult {
    display: block;
    background: #fffbf2;
    background-image: url(../images/score-icon.png);
    background-repeat: no-repeat;
    background-position: right top;
    min-height: 300px;
    border: 1px solid #FFA900;
    padding: 14px;
    line-height: 22px;
}

.scoreResult table, #scoreResult table {
    font-size: 10px;
    text-align: center;
    table-layout: fixed;
}

.aiPanelM { height: 100%; }
.aiPanelM>.listItem>.word { display:block; color: #333333; font-size: 18px; line-height:22px; background: #F5F5F5; border: 1px solid #E0E0E0; padding: 4px; margin-bottom: 4px; }
.aiPanelM>.listItem>.scoreResult { margin: 20px 0; min-height: 40px; background-image: none; padding: 10px; }

#chivox-recorder { width: 220px; height: 140px; position:relative; left: 470px; top: -88px; }
#chivox-recorder>canvas { position: absolute; top: 50px; left: 14px; }
